ASP.Net Ajax 1.0 not rendering Flash control after callback

New years blessings to all.

This year started off with a bang and a couple of headaches to boot. I had to implement a very interesting Interactive Map previewer for a consumer web site and ran into something very funny (yes I found it kind of funny) and set about trying to figure it out myself (no help from Google that is).

The funny started off not as a problem. A normal ASPX page containing a reference to SWFObject and calling the script to populate a layer with the video I need to display. The page then turned out to require a bit of AJAX which, at the time of discussion seemed without error. Just wrap the table within an UpdatePanel and there you go, right? Turned out to be quite a fiasco. When ever I clicked on a button within the UpdatePanel it seemed to not call the JavaScript function again, obviously because the UpdatePanel causes a server-side refresh of it’s inner content.

Bit of a problem.

So with the trusty Firebug at my aid and a good day to figure this out I looked into a very interesting client side function for ASP.Net Ajax called _endRequest(sender, args);. Basically when an async callback completes its rendering of the page, it saw that my JavaScript had already been called (during page first load) and ignored the call. When fireing JScript on a page without ASP.Net Ajax, it runs the JScript again as it’s a full page load (and HTML load) on the clientside, when this occurs in ASP.Net Ajax it assumes the load has completed already and invalidates any script that you wish to run.

The _endRequest(sender, args); method allows you to fire off additional script once the async callback occured.

An example of how to make use of this method:

postback.js

var prm = Sys.WebForms.PageRequestManager.getInstance(); // we need to get the instance of the request causing the callback

prm.add_endRequest(EndRequest); // add the _endRequest method call to the Request instance. this gives Ajax an indication that an EndRequest event should be handled

function EndRequest(sender, args) {

// call the SWFObject and load the object where necessary
// all external js pages have already been included in the page load so no need to do so again
window[“InteractiveMap”] = new Object();
var soPromo = new SWFObject(“../Assets/Flash/object.swf”, “InteractiveMap”, “540”, “317”, “8”, “#FFFFFF”);
soPromo.addParam(“wmode”, “transparent”);
soPromo.write(“fc_interactive”);
}

In order for this to function along side ASP.Net Ajax, all you need to do is add a reference to this new file from within the ScriptManager:

<asp:ScriptManager ID=”sm” runat=”server”>
<Script>
<asp:ScriptReference VirtualPath=”~/Assets/Scripts/postback.js” />
</Script>
</asp:ScriptManager>

And that’s it.

Visual Studio 2010 Pre-Release CTP

It’s been a while, so much going on, all work related that I hardly have time to get onto my blog.

*UPDATE: //TODO: go through spell check before uploading blog posts

So, finally joined the Live! craze and installed the Windows Live! Beta suite of applications, in particular the new Messenger Live! Beta (neat new UI, digging the WPF approach), Windows Live! Mail which works like a charm for my Live! mail account and of course Windows Live! Writer Beta which I’m currently utilizing for this entry //TODO: Put smiley-face here

So PDC 2008 is officially over and even though I was not fortunate enough to attend (the crappiest thing of being a technology freak, living in South Africa), I could still follow the proceedings thanks to the guys at Channel9 (highly recommend that you guys click through to their site and check out their various coverage material from PDC 2008) and what an interesting session this was, Windows 7 was introduced, even though not majorly different in UI from Vista but will sport the tagline “Less is better”, which I obviously cannot wait to see, Windows 2008 R2 which will be the official Server OS release for Windows 7 (interesting enough, after installing Windows 2008 Data Center, I noticed that they versioned it Windows 6 which is, in theory incorrect as the server releases came out long after Windows 3.1) and then the not-so-secret-anymore Visual Studio 2010 and NetFX 4.0 codenamed “Oslo” which was also made public at PDC.

As I cannot wait for any more screen-casts and tech shots of what VS2010 will sport, I popped over to Microsoft Connect, which hosts the official CTP links for this and downloaded the enormous 7.1GB, 11 part RAR file to see what this Pre-Release has in store. But first a look at the Pre-Release milestone, what it holds for enthusiasts like myself and what not to expect:

1. the download site is huge –> 7GB
2. the extraction is gigantic, totaling at a whopping 24.6GB which is, of course a Virtual Hard Disk (VPC2007SP1)
3. They spared no expense on this, it’s my recommendation that you do not run this VM on any machine lower then an Intel Core 2 system with at least a decent amount of RAM, 2GB just does not do it.
4. why so hectic?
   1. it’s a Windows 2008 Standard installation
   2. it contains Office 2007 (Word, Excel)
   3. it contains an instance of SQL Server 2008
   4. it contains an instance of Visual Studio 2008
   5. Windows SDK 7 is installed
5. it comes with a couple of tutorial tasks
6. it comes with DinnerNow! sample application, which I enjoy pulling apart. makes me realize I know very little about WPF //TODO: get a MR Green emote, that thing rules

After a couple of minutes, I have to say that my home desktop is not of the strongest pieces of machinery available I got into the environment.

Visual Studio 2010 Team System

 

[Figure 1] shows us what the new Welcome (previously called the Start Page) looks like. Notice that the walkthrough tutorials have been set up in the Welcome page. This is a typical Vista approach, sleek, stylish … DAMN SLOW (or maybe just because it’s in a snail-slow VM environment, I don’t know) otherwise not much have changed from a UI perspective. I was hoping to see more collaboration panels in the TS release, something that would reflect project management stats, so that tech-leads and project leaders can have an indication of what’s going on within a specific project, but alas, nothing to that effect.

Apart from the Welcome Page, it’s Visual Studio 2008 to the <T>. Nothing major has been changed on the start up page, we have the Toolbox panel, Solutions panel, etc. On to creating a new project …

[Figure 2] The Framework drop down allows us to compile for NetFX 2.0, 3.0, 3.5 and 4.0 (new Framework) but there is no native support for Silverlight in the project/language type selection. As part of this release I would have expected the development team to include Silverlight, but not there. Means I’ll have to install Expression Studio 2.0 in order to get the VSI templates installed, that’s if they will install within VS2010.

Something new in VS2010 is the Windows Installer XML project which allows you to create WiX packages from within the studio, more about this release here. As I’ve never had the opportunity (Web Developer) to create custom installer packages for my applications, I cannot shed more light on this project type, for now at least.

The last thing to note is a new utility that ships with VS2010, something called Camaro, which is a center to test activities, from a blog post, Microsoft Codename “Camaro” can be summed up as follows, and I quote: “…a tool designed to help testers and test managers to plan, organize and analyze a testing effort.”. [Figure 3] shows the Testing Activity Center, with pre-populated test activities from DinnerNow! application in progress.

For me this pre-release version points out various efforts of Microsoft to improve team production and or release efforts within in teams. This entry is based purely on what I’ve seen in this pre-release and as this is expected to change, I don’t encourage that these screenshots are seen as the final release of the product. I will be following the release of VS2010 with a keen eye and hope that some of you guys out there reading this might have more to add.

Project Rosetta

I was sent this link recently, a project dedicated to getting Flash developers (AS Developers) to use their existing knowledge of Flash to build next generation Silverlight application.

Something I feel worth sharing

ASP.Net 3.5 SP1 – dynamic data

I was recently asked to feedback to our development team our findings at Tech-Ed 08, so paging through my notes and the companion DVD we received, I figured it good to look at the workings behind dynamic data extensions, a new feature in the .Net 3.5 stack.

Where to start off? I remembered seeing dynamic data for the first time at a Dev4Devs session, a small community driven event hosted by Microsoft South Africa a couple of months ago. Brent Samodien briefly went into a quick “hello world” application, demo’ing how easily an inferred schema can be used to context a database and display the values back onto the page without writing, in effect, a single line of code. Wow I thought at the time but the interest slowly faded away in LINQ and writing custom providers for it. So how best to get back into this then use it as an introductory demo to the team …

Right into it. What is dynamic data extensions and why would it be useful to use?

Dynamic data is fast, dynamic model created with the focus on allowing developers to push database content into production in a quick way. Imagine having to write 50 pages that pull content for a clothing store from a database, and displaying the content so that it can be easily accessible by users and easily maintainable by a group of people. How long would you spend developing something like that, using either 3rd party controls and or building such a system from scratch? Will take some time.

With dynamic data you can build an application like this in seconds.

In this demo, we will look at how easy a new application can be generated using dynamic data extension. To follow along with this demo you need the following:

1. Web Developer Express 2008, Visual Studio 2008 Professional
2. ASP.Net 3.5 Service Pack 1
3. SQL Server 2005 with SP2, SQL Server 2005 Developer Edition with SP2, SQL Server 2008 Express or SQL Server 2008 Developer Edition

I’m using Visual Studio 2008 Team System Developer Edition on my development box with SQL Server 2008 Developer Edition but everything will workin in either of the above mentioned product stack.

So let’s get started by building an empty web application.

(NOTE: I’m using the Web Application templates in Visual Studio, and not Web site. If my Solution Explorer looks different from yours please keep in mind that Web sites are handled differently from Web Applications and or that I have “Always Show Solutions” enabled)

For this demo we will be building an assemblied web application, if you wish to follow an example that uses the Dynamic Data Website Wizard, please click through to this blog.

In Visual Studio 2008, select File -> New Project and select Dynamic Data Web Application

figure 1 (New Dynamic Data Web Application)

I called my project “DynamicDataLINQ” as we won’t be looking at creating a dynamic data web application around the ADO.Net Entity Framework, which is also a new feature in the 3.5 stack.

The template should now have created all the necessary project files for us, so let’s look at them quickly:

figure 2 (project file outline)

The project structure is pretty standard, we have a web.config file, a master page, a stylesheet with a couple of styles, a global.asax file, a default.aspx page which is a content page built off the masterpage and then a directory called DynamicData which is of great interest to us. Also a couple of new assemblies have been added to this project during creation:

figure 3 (assembly references)

This example is not about these new assemblies but in a nutshell they are the driving force around the new 3.5 SP1 extensions stack and is used within both Dynamic Data and the new MVC application models. Abstractions abstracts the usual HTTPWrappers from conventional Web Forms into this new class that extends them for the new Routing model. DynamicData and DynamicData.Design hosts all the required classes for building a dynamically data-driven web application, like we are doing now. These two classes holds all the magic. Use RedGate Relector.Net to dig into these assemblies if you want to find out how they are plastered together. The Entity assembly holds reference to the ADO.Net Entity Framework, which is not covered in this demo. Extensions, Mobile and Services will also not be covered in this demo. The new System.Web.Routing assembly is the force behind the new routing model that transforms your static URLS into a new, easy to understand model, for example /{table}/{action} which we’ll see a little bit later on.

URL Rewriting is not new to ASP.Net, please don’t confuse the two. The routing model streamlines the urls in a search engine friendly manner that makes catalogue paging easier. For more information about this review the MVC framework where this is covered in greater detail.

The folder that is of interest to us is the “DynamicData“. When this folder is expanded we see four (4) folders and a web.config file. The config file is just extra configuration settings that’s applied to the “DynamicData” folder.  The first sub directory is called “Content” and hosts and “Image” folder and 2 ascx files, called “FilterUserControl.ascx” and “GridViewPager.ascx” respectively. The FilterUserControl exposes filter functionality to the dynamic data model, usually used alongside a grid control. The second, “GridViewPager” exposes the paging control at the bottom of the standard ASP.Net Grid control.

The second directory is an empty folder called “CustomPages” and will be covered in another part of my article on Dynamic Data.

The last remaining directores, “FieldTemplates” and “PageTemplates” holds relevance to the actual dynamic data model. Field templates are custom controls that infers the DB schema using standard HTML controls, for example, a BIT field in a table, will be represented by a Checkbox, a VARCHAR field will be represented by both a Label control for view and Textbox for edit. These field templates are customizable. The Page templates are the actual parts of the application that display the data from the DB (DataContext) on the page. When building your own website based on the dynamic data model, this is were you will start.

(figure 4) Dynamic Data folder

Let’s go ahead and add our database schema to this project. To keep my project clean have I gone ahead and created a new folder within this project called “DataContext“, you do not need to do this. Right-click on the project, or if you have gone ahead and created the “DataContext” folder and add a New Item to the project. On the next screen, within the treeview on the left hand side of the screen choose “Data“, note that I’m building this project in Visual C#, but all should look similar in Visual Basic.Net. Within the new option on the right hand side, choose “LINQ to SQL Classes“. For this demo I will be connecting to the Northwind database schema, which is not part of both SQL Server 2005 or SQL Server 2008. You can download SQL Server 2000 sample database from this location. I’m going ahead and I’m calling my DBML file, “Northwind” and press “Add“.

(figure 5) LINQ to SQL classes

A new window appears with to columns, the left hand column expects tables from a data store to be dragged onto the canvas. This will create the tables as classes for you that you can then reference in other parts of your project. This is exactly like other ORM tools such as CodeSmith, SubSonic and or any other available on the market. The exception here is that the ORM automatically builds up the LINQ prodiver LINQ to SQL for you so you don’t have to go and add it manually yourself. The right hand column will generate “methods” from your DB stored procedures. This is not required for this demo but if you have update, inserts and deletes that you would like to use from your DB this is where you would like to assign them.

Before we add our tables to the DBML file, open up the Northwind.designer.cs file or the *.designer.cs file for your named classes file. Notice that this file is quite empty. The class declaration, namespace and some using statements are present.

Now in order to get the tables onto the canvas, we simply open our Server Explorer window, add a new connection, if it doen not exist already to your database that you wish to map. In our demo we will be pointing our database to the Northwind database in SQL Server 2008. You will map the data store to where you have your database set up. Simply add a new connection to your database, expand the tables folder in the treeview, select the tables that you wish to map and then drag them onto the left hand canvas. The ORM tool will automatically create a class diagram of the tables, highlight the relationships and in the back-end you will now see that the file Northwind.designer.cs has been updated with all the classes, properties and methods from your DB schema.

Now that we have our Northwind database schema’d out, we only need to tell the web application where to get the data, and how to manipulate it.

To do this, we need to open up the Global.asax.cs file, which is the code behind file for the Global.asax file. So go again and open this file. You will notice, that unlike the normal Global.asax file only the Application_Start method is available, with a new public static method called RegisterRoutes() method that accepts a RouteCollection object as parameter. This method is then called whenever the application starts up.

So lets look at the RegisterRoutes() method. First a new MetaModel is instantiated. The MetaModel reads the metadata from the DB you just added to this project. Next is some important notice. It says that you should only allow scaffolding of the data if you so which to support templating. For this demo we do need to scaffold the database due to the various relationships in the DB. The template will then automatically target, for instance, a Product to a Catalogue, a Catalogue to a Shipping Address and so forth. So go ahead and uncomment the line that reads:

model.RegisterContext(typeof(YourDataContextType), new ContextConfiguration() { ScaffoldAllTables = false});

and change the part that reads “YourDataContextType” to read “DataContext.NorthwindDataContext” or whatever you decided to name the DBML. If you cannot find your data context file and you created the “DataContext” folder, you will need to add the DataContext namespace infront of the NorthwindDataContext object. If you are not sure what you called your data context class, open up the *.designer.cs file for your DBML file, the name you want is the main class (first class) within that file.

Now set ScaffoldAllTable = true and save the file.

That is it. You have now successfully, if you followed instructions correctly, created your first Dynamic Data web application using the new data-driven model from Microsoft.

Run the application and see how everything has now been compiled for you and all you had to do was create a schema inferred from the DB and changed a single line in the Global.asax file.

Part II will feature a more customized review of the Dynamic Data model, how to incorporate 3rd party controls and get them to leverage this model.

Samsung Omnia South Africa

Our team is proud to announce the launch of the Samsung Omnia website.

http://www.samsungmobile.co.za/omnia/

The definition of blogness

For some time I’ve been struggling to get my head around why I would want to blog… “blog”, it’s such a heavy word, I find my tongue dragging on the ground. No, call it, expression of my thoughts onto a space where nobody actually takes the time to read the shit others post.

Okay, maybe they do but the point is has this whole blogging business not seen enough hype yet? Every person that I know has a blog of some sort, whether they use myspace or facebook to express their feelings or thoughts, it boils down to the same thing, expression…

So here I find myself, in the blog world once again after a year or so of no blogness from my side, a new home, WordPress and the “what-the-hell-should-I-choose-for-a-design” question making me even more relaxed to not do any work {at least it’s later afternoon and almost home time right …}. So I went with this kewl design that you are viewing now, makes me no-more jaded that I actually am. Blogness, the first entry onto my new space, and I’m already rumbling away. Back to business then?

Blogness, what it means to me is not only to share my experience, knowledge and thoughts on stuff that most people take for granted, but give myself the opportunity to see of all of these things can be valued.

So that is it, my first blog entry …